<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索  -->
        <el-form :model="requestParameters" ref="requestParameters">
          <div class="filter-container">
            <el-row>
              <el-col>
                <el-form-item label="关键词" prop="keyword">
                  <el-input
                    @keyup.enter="handleFilter"
                    style="width: 180px;"
                    placeholder="请根据编号搜索"
                    class="filter-item"
                    v-model="requestParameters.keyword"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col>
                <el-form-item label="">
                  <el-button size="small" type="primary" @click="clearAll"
                    >清空</el-button
                  >
                  <el-button size="small" type="primary" @click="getList"
                    >搜索</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table :data="dataList" v-loading="listLoading" style="width: 100%">
          <el-table-column align="center" label="编号" width="220">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题型" width="80">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.questionType == '1'"> 单选</span>
                <span v-if="scope.row.questionType == '2'">多选</span>
                <span v-else> 简答</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="220">
            <template slot-scope="scope">
              <div>
                <div
                type="button"
                  v-for="(item, index) in scope.row.questionIDs"
                  :key="index"
                  @click="toPreview(item)"
                >
                  {{ item.number }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="166">
            <template slot-scope="scope">
              {{ scope.row.addTime }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="totalSeconds"
            label="答题时间"
            width="80"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.totalSeconds }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="accuracyRate"
            label="正确率"
            width="166"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.accuracyRate }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="userName"
            label="录入人"
            width="166"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.userName }}</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label=" 操作"
            width="80"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                plain
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="removeQuestion(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination">
          <div class="pages">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(counts)"
              :page-size="Number(requestParameters.pagesize)"
              :page-sizes="[10, 20, 30, 50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
        <!-- end -->
        <!-- 预览组件 --> 
        <questions-preview dialogVisible="dialogVisible" @close="dialogVisible='false'" :questionItem="questionItem"></questions-preview>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail, } from "@/api/hmmm/questions";
import questionsPreview from "../components/questions-preview"
export default {
  name: "questionsRandoms",
  // 注册预览组件
   components: {
    questionsPreview,
  },
  data() {
    return {
      //预览中 传入的 试题
      questionItem:{},
      dataList: [],
      counts: null,
      alertText: "",
      listLoading: false,
      number: "",
      dialogVisible:false,
      //题型
      questionType: {
        "1": "单选",
        "2": "多选",
        "3": "简答"
      },
      requestParameters: {
        page: 1,
        pagesize: 20,
        keyword: null //关键词
      }
    };
  },
  methods: {
    // 获取查询列表数据
    async getList(params) {
      const { data: res } = await randoms(this.requestParameters);
      // 获取数据给dataList
      // console.log("查询列表", res.items);
      this.dataList = res.items;
      // 获取总条数
      this.counts = res.counts;
      this.alertText = `共 ${this.total} 条记录`;
      console.log("获取列表成功");
    },

    // 搜索信息
    handleFilter() {
      this.requestParameters.page = 1;
      this.getList(this.requestParameters);
    },
    // 点击清空按钮 清空 搜索框内容
    clearAll() {
     this.requestParameters.keyword = null
    },
    // 每页显示信息条数
    handleSizeChange(val) {
      this.requestParameters.pagesize = val;
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters);
      }
    },
    // 进入某一页  当前页码发生变化
    handleCurrentChange(val) {
      this.requestParameters.page = val;
      this.getList();
    },
    //  点击删除按钮  触发删除事件
    async removeQuestion(params) {
      console.log(params);
      const result = await this.$confirm(
        "此操作将永久删除该题目,是否继续?",
        "提示"
        // {
        //   confirmButtonText: "确定",
        //   confirmButtonText: "取消",
        //   type: "warning"
        // }
      ).catch(err => err);
      console.log(result);
      if (result == "confirm") {
        const data = await removeRandoms(params);
        console.log(data);
        if (data.status === 200) {
          return this.$message.success("删除成功");
        }
      };
      //刷新组题列表
      this.getList();
    },
    // 点击 题目编号 预览题目
    async toPreview(params){
      // 显示预览弹出框
      console.log(params);
      
      const {data} = await detail({id: params.id})
      data.questionType = params.questionType
      data.subject = params.subject
      this.dialogVisible = true
      // 传入试题
      this.questionItem = data
    }
  },
  //

  created() {
    // 获取题库列表
    this.getList();
  }
};
</script>

<style scoped lang='less'>
.filter-container {
  height: 64px;
  // width: vw;
  .el-row {
    display: flex;
    justify-content: spsce-brtween;
    align-items: center;
    width: 100%;
  }
}
</style>
